button{
	border-radius: 10rpx;
	display: inline-block;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 40rpx;
	border-color: #ddd;
	box-sizing: border-box;
	&::after{
		display: none;
	}
	
	
	&[type="primary"]{
		background-color: $uni-color-primary;
		color: #fff;
		&[plain]{
			color:$uni-color-primary;
			border-color: $uni-color-primary;
		}
	}
	&[type="success"]{
		background-color: $uni-color-success;
		color: #fff;
		&[plain]{
			color: $uni-color-success;
			border-color: $uni-color-success;
		}
	}
	&[type="warning"]{
		background-color: $uni-color-warning;
		color: #fff;
		&[plain]{
			color: $uni-color-warning;
			border-color: $uni-color-warning;
		}
	}
	&[type="danger"]{
		background-color: $uni-color-error;
		color: #fff;
		&[plain]{
			color: $uni-color-error;
			border-color: $uni-color-error;
			
		}
	}
	&[plain]{
		background-color: #fff;
		
	}
	
	
	&[size="large"]{
		height: 110rpx;
		line-height: 110rpx;
		font-size: 45rpx;
		padding: 0 40rpx;
	}
	&[size="normal"]{
		height: 90rpx;
		line-height: 90rpx;
		font-size: 40rpx;
		padding: 0 35rpx;
	}
	&[size="small"]{
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		padding: 0 30rpx;
	}
	&[size="mini"]{
		height: 50rpx;
		line-height: 50rpx;
		font-size: 25rpx;
		padding: 0 25rpx;
	}
	
	&:active{
		filter: grayscale(40%);
	}
	&[plain]:active{
		background-color: #eee;
	}
	&[long]{
		display: block;
	}
}

checkbox{
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 40rpx;
	height: 40rpx;
	overflow: hidden;
	transition: .2s;
	border-radius: 10rpx;
	&::before{
		content: "";
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height: 100%;
		background-color: #fff;
		z-index:1;
		border-radius: inherit;
		border:1rpx solid #aaa;
		box-sizing: border-box;
	}
	&::after{
		content: "";
		position: absolute;
		display: table;
		border: 2rpx solid #fff;
		border-top: 0;
		border-left: 0;
		transform: rotate(45deg) scale(0) translate(-50%,-50%);
		opacity: 0;
		transition: all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;
		top: 45%;
		left: 25%;
		width: 25%;
		height: 50%;
		z-index:2;
	}
	&[aria-checked="true"]{
		box-shadow: 0 10rpx 30rpx 0 rgba(0,90,160,.3);
		&::before{
			background-color:#3B80FF;
			border-color: transparent;
		}
		&::after{
			transform: rotate(45deg) scale(1) translate(-50%,-50%);
			opacity: 1;
			transition: all .2s cubic-bezier(.12,.4,.29,1.46) .1s;
		}
	}
	&[aria-disabled="true"]{
		box-shadow: none;
		&::before{
			filter: invert(10%);
		}
	}
}